import React, { Component } from 'react';

import { Flex } from 'antd-mobile';
import { NavBar, Icon, Tabs, List, Toast, ActivityIndicator} from 'antd-mobile';
import { Link } from 'react-router-dom';
import { get } from '../api/getData';

import 'antd-mobile/lib/flex/style/index';
import 'antd-mobile/lib/nav-bar/style/css';
import 'antd-mobile/lib/icon/style/css';
import 'antd-mobile/lib/tabs/style/css';
import 'antd-mobile/lib/list/style/css';
import 'antd-mobile/lib/activity-indicator/style/css';

import '../allStyle.css';

class Friends extends Component{
    state = {
        is_agent : 0,
        list : [],
        userCount : 0,
        todayCount : 0,
        animating : false
    }
    componentDidMount(){
        this.getUserList(this.state.is_agent);
        document.title = '好友列表';
    }

    getUserList(is_agent){
        let reqParams = {
            agent : is_agent
        };
        let _this = this;

        _this.setState({
            animating: true
        });

        get('/api/father/user', reqParams, function (error, data) {
            _this.setState({
                animating: false
            });
            if(null === error){
                _this.setState({
                    ...data
                });
            }
        });
    }

    tabChange(activeKey){
        this.setState({
            is_agent : activeKey.agent
        });
        this.getUserList(activeKey.agent);
    }
    render(){
        const FriendsTabs = [
            { title: '我邀请的好友', agent:0 },
            { title: '下级代理', agent: 1},
          ];
        const Item = List.Item;
        const Brief = Item.Brief;
        return(
                <div>

                    <ActivityIndicator
                                    toast
                                    text="正在获取数据..."
                                    animating={this.state.animating}
                                  />

                    <NavBar
                    mode='light'
                    icon={<Link to='/User'><Icon type="left" /></Link>}
                    style={{backgroundColor:'white'}}
                    ></NavBar>
                    <div style={{marginTop:'1.2rem'}}>
                        <Tabs
                            tabs={FriendsTabs}
                            initialPage={0}
                            animated={false}
                            useOnPan={false}
                            onChange={this.tabChange.bind(this)}
                        >
                            <div style={{ display: 'flex',  backgroundColor: '#fff',width:'100%' }}>
                                <List style={{width:'100%'}}>
                                    <Item >
                                        <Flex justify='around' alignContent='center'>
                                            <span>好友总数<Brief style={{color:'red',fontSize:'14px'}}>{this.state.userCount}</Brief></span>
                                            <span>今日新增<Brief style={{color:'red',fontSize:'14px'}}>{this.state.todayCount}</Brief></span>
                                        </Flex>
                                    </Item>
                                    {this.state.list.map(function(item, index){
                                        return (<Item
                                            key={index}
                                            thumb={item.headimgurl}
                                            multipleLine
                                            onClick={() => {}}
                                            style={{padding:'25px 20px'}}
                                        >
                                            <Flex justify='between'>
                                                <span>{item.nick_name}</span>
                                                <span style={{fontSize:'12px',color:'gray'}}>{item.created_at} 关注</span>
                                            </Flex>
                                        </Item>)
                                    })}
                                </List>
                            </div>
                            <div style={{ display: 'flex',backgroundColor: '#fff' }}>
                                <List style={{width:'100%'}}>
                                    <Item >
                                        <Flex justify='around' alignContent='center'>
                                            <span>代理总数<Brief style={{color:'red',fontSize:'14px',width:'auto'}}>{this.state.userCount}</Brief></span>
                                            <span>今日新增<Brief style={{color:'red',fontSize:'14px'}}>{this.state.todayCount}</Brief></span>
                                        </Flex>
                                    </Item>
                                    {this.state.list.map(function(item, index){
                                        return (<Item
                                            key={index}
                                            thumb={item.headimgurl}
                                            multipleLine
                                            onClick={() => {}}
                                            style={{padding:'25px 20px'}}
                                        >
                                            <Flex justify='between'>
                                                <span>{item.nick_name}</span>
                                                <span style={{fontSize:'12px',color:'gray'}}>{item.created_at} 关注</span>
                                            </Flex>
                                        </Item>)
                                    })}
                                </List>
                            </div>
                        </Tabs>
                    </div>
                </div>
        )
    }
}
export default Friends;
